<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCP SSH工具 - 统一服务</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 MCP SSH工具</h1>
            <p>统一的Node.js服务 - 远程服务器管理与命令执行</p>
        </header>

        <div class="main-content">
            <div class="sidebar">
                <h2>📋 服务器列表</h2>
                <div class="server-list" id="serverList">
                    <div class="loading">加载中...</div>
                </div>
                <button id="addServerBtn" class="btn primary">➕ 添加服务器</button>
            </div>

            <div class="content">
                <div class="server-info" id="serverInfo">
                    <h2>ℹ️ 服务器信息</h2>
                    <div class="no-server-selected">请从左侧选择一个服务器</div>
                </div>

                <div class="command-panel">
                    <h2>⚡ 命令执行</h2>
                    <div class="command-input">
                        <input type="text" id="commandInput" placeholder="输入要执行的命令..." disabled>
                        <button id="executeBtn" class="btn primary" disabled>🚀 执行</button>
                        <button id="testConnectionBtn" class="btn secondary" disabled>🔗 测试连接</button>
                    </div>
                    <div class="command-output" id="commandOutput">
                        <div class="output-header">
                            <span>📤 命令输出</span>
                            <button id="clearOutputBtn" class="btn small">🗑️ 清空</button>
                        </div>
                        <pre id="outputContent"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加服务器对话框 -->
    <div class="modal" id="addServerModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>➕ 添加服务器</h2>
                <!-- 移除关闭按钮，只能通过保存或取消按钮关闭 -->
                <!-- <span class="close-btn" id="closeModalBtn">&times;</span> -->
            </div>
            <div class="modal-body">
                <form id="addServerForm">
                    <div class="form-group">
                        <label for="serverName">服务器名称 *</label>
                        <input type="text" id="serverName" name="serverName" required>
                    </div>
                    <div class="form-group">
                        <label for="serverIp">IP地址 *</label>
                        <input type="text" id="serverIp" name="serverIp" required>
                    </div>
                    <div class="form-group">
                        <label for="serverPort">端口</label>
                        <input type="number" id="serverPort" name="serverPort" value="22" required>
                    </div>
                    <div class="form-group">
                        <label for="username">用户名 *</label>
                        <input type="text" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label>认证方式 *</label>
                        <div class="radio-group">
                            <label>
                                <input type="radio" name="authType" value="password" checked> 🔑 密码
                            </label>
                            <label>
                                <input type="radio" name="authType" value="key"> 🔐 SSH密钥
                            </label>
                        </div>
                    </div>
                    <div class="form-group" id="passwordGroup">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="password">
                    </div>
                    <div class="form-group" id="keyPathGroup" style="display: none;">
                        <label for="keyPath">密钥路径</label>
                        <input type="text" id="keyPath" name="keyPath" placeholder="./keys/server.pem">
                    </div>
                    <div class="form-group">
                        <label for="description">描述</label>
                        <textarea id="description" name="description" placeholder="服务器用途描述..."></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn primary">💾 保存</button>
                        <button type="button" class="btn" id="cancelAddBtn">❌ 取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="notification"></div>

    <script src="app.js"></script>
</body>
</html> 